let documentObj = [
  {
    id: 'position',
    name: '定位',
    content: [
      { key: 'por ', value: 'position: relative;' },
      { key: 'poa ', value: 'position: absolute;' },
      { key: 'pof ', value: 'position: fixed;' },
      { key: 'tlc ', value: 'top: 50%; left: 50%; transform: translate(-50%, -50%);' },
      { key: 'tpc ', value: 'top: 50%; transform: translateY(-50%);' },
      { key: 'tp-0', value: 'top: 0;' },
      { key: 'lf-0', value: 'left: 0;' },
      { key: 'rt-0', value: 'right: 0;' },
      { key: 'bt-0', value: 'bottom: 0;' }
    ]
  },
  {
    id: "hide",
    name: "显示隐藏",
    content: [
      { key: 'dn', value: 'display: none' },

      { key: 'bdn', value: 'border: none' },

      { key: 'vish', value: 'visibility: hidden' },

      { key: 'w-0', value: 'width: 0' },

      { key: 'h-0', value: 'height: 0' },

      { key: 'op-0', value: 'opacity: 0' },

      { key: 'oh', value: 'overflow: hidden' },
    ]
  },
  {
    id: "inherit",
    name: "继承",
    content: [
      { key: 'w-100p', value: 'width: 100 %;' },

      { key: 'h-100p', value: 'height: 100 %;' },

      { key: 'wh-100p', value: 'width: 100 %; height: 100 %;' },

      { key: 'wih', value: 'width: inherit;' },

      { key: 'hih', value: 'height: inherit;' },

      { key: 'whih', value: 'width: inherit; height: inherit;' },
    ]
  },
  {
    id: "radius",
    name: "圆角",
    content: [
      { key: 'bdr-0', value: 'border-radius: 0;' },

      { key: 'bdr-5p', value: 'border-radius: 50 %;' },

      { key: 'bdr-10', value: 'border-radius: 10px;' },

      { key: 'bdr-20', value: 'border-radius: 20px;' },

      { key: 'bdr-30', value: 'border-radius: 30px;' },
    ]
  },
  {
    id: "iblock",
    name: "块级",
    content: [
      { key: 'db', value: 'display: block;' },

      { key: 'di', value: 'display: inline;' },

      { key: 'dib', value: 'display: inline-block;' },

      { key: 'm0a', value: 'margin: 0 auto;' },
    ]
  },
  {
    id: "flexbox",
    name: "弹性盒子",
    content: [
      { key: 'df', value: 'display: flex;' },

      { key: 'flex1', value: 'flex: 1;' },

      { key: 'flex2', value: 'flex: 2;' },

      { key: 'flex3', value: 'flex: 3;' },

      { key: 'fldc', value: 'flex-direction: column;' },

      { key: 'flw', value: 'flex-wrap: wrap;' },

      { key: 'align-start', value: 'align-items: flex-start;' },

      { key: 'align-end', value: 'align-items: flex-end;' },

      { key: 'align-center', value: 'align-items: center;' },

      { key: 'align-stretch', value: 'align-items: stretch;' },

      { key: 'self-start', value: 'align-self: flex-start;' },

      { key: 'self-center', value: 'align-self: flex-center;' },

      { key: 'self-end', value: 'align-self: flex-end;' },

      { key: 'self-stretch', value: 'align-self: stretch;' },

      { key: 'align-stretch', value: 'align-items: stretch;' },

      { key: 'justify-start', value: 'justify-content: flex-start;' },

      { key: 'justify-end', value: 'justify-content: flex-end;' },

      { key: 'justify-center', value: 'justify-content: center;' },

      { key: 'justify-between', value: 'justify-content: space-between;' },

      { key: 'justify-around', value: 'justify-content: space-around;' },

      { key: 'justify-evenly', value: ' justify-content: space-evenly;' },
    ]
  },
  {
    id: "mapaing",
    name: "内外边距",
    content: [
      { key: 'm-0', value: 'margin: 0px;' },

      { key: 'mt-0', value: 'margin-top: 0px;' },

      { key: 'mr-0', value: 'margin-right: 0px;' },

      { key: 'mb-0', value: 'margin-bottom: 0px;' },

      { key: 'ml-0', value: 'margin-left: 0px;' },

      { key: 'mlr-0', value: 'margin-left: 0px; margin-right: 0px;' },

      { key: 'mtb-0', value: 'margin-top: 0px; margin-bottom: 0px;' },

      { key: 'p-0', value: 'padding: 0px;' },

      { key: 'pt-0', value: 'padding-top: 0px;' },

      { key: 'pr-0', value: 'padding-right: 0px;' },

      { key: 'pb-0', value: 'padding-bottom: 0px;' },

      { key: 'pl-0', value: 'padding-left: 0px;' },

      { key: 'plr-0', value: 'padding-left: 0px; padding-right: 0px;' },

      { key: 'ptb-0', value: 'padding-top: 0px; padding-bottom: 0px;' },


      { key: '', value: '以此类推，在“-”后面加上数字 10、20、30、40、50 来控制内外间距的大小' },
    ]
  },
  {
    id: "float",
    name: "浮动",
    content: [
      { key: 'cf', value: '清除浮动' },

      { key: 'fl', value: 'float: left;'},

      { key: 'fr', value: 'float: right;'},
    ]
  },
  {
    id: "solid",
    name: "实线",
    content: [
      { key: 'solid', value: '实线框' },

      { key: 'solid-top', value: '顶部实线' },

      { key: 'solid-right', value: '右侧实线' },

      { key: 'solid-bottom', value: '底部实线' },

      { key: 'solid-left', value: '左侧实线' },
    ]
  },
  {
    id: "dashed",
    name: "虚线",
    content: [
      { key: 'dashed', value: '虚线框' },

      { key: 'dashed-top', value: '顶部虚线' },

      { key: 'dashed-right', value: '右侧虚线' },

      { key: 'dashed-bottom', value: '底部虚线' },

      { key: 'dashed-left', value: '左侧虚线' },
    ]
  },
  {
    id: "shadow",
    name: "阴影",
    content: [
      { key: 'shadow-lg', value: '长阴影' },

      { key: 'shadow-warp', value: '默认阴影' },

      { key: 'shadow-blur', value: '根据背景改变颜色的阴影' },
    ]
  },
  {
    id: "background",
    name: "背景",
    content: [
      { key: 'bg-red', value: 'background-color: #e54d42; color: #ffffff;' },

      { key: 'bg-orange', value: 'background-color: #f37b1d; color: #ffffff;' },

      { key: 'bg-yellow', value: 'background-color: #fbbd08; color: #333333;' },

      { key: 'bg-olive', value: 'background-color: #8dc63f; color: #ffffff;' },

      { key: 'bg-green', value: 'background-color: #39b54a; color: #ffffff;' },

      { key: 'bg-cyan', value: 'background-color: #1cbbb4; color: #ffffff;' },

      { key: 'bg-blue', value: 'background-color: #0081ff; color: #ffffff;' },

      { key: 'bg-purple', value: 'background-color: #6739b6; color: #ffffff;' },

      { key: 'bg-mauve', value: 'background-color: #9c26b0; color: #ffffff;' },

      { key: 'bg-pink', value: 'background-color: #e03997; color: #ffffff;' },

      { key: 'bg-brown', value: 'background-color: #a5673f; color: #ffffff;' },

      { key: 'bg-grey', value: 'background-color: #8799a3; color: #ffffff;' },

      { key: 'bg-gray', value: 'background-color: #f0f0f0; color: #333333;' },

      { key: 'bg-black', value: 'background-color: #333333; color: #ffffff;' },

      { key: 'bg-white', value: 'background-color: #ffffff; color: #666666;' },
    ]
  },
  {
    id: "text",
    name: "文本",
    content: [
      { key: 'fz-0', value: 'font-size: 0;' },

      { key: 'fz-12', value: 'font-size: 12px;' },

      { key: 'fz-14', value: 'font-size: 14px;' },

      { key: 'fz-16', value: 'font-size: 16px;' },

      { key: 'fz-18', value: 'font-size: 18px;' },

      { key: 'fz-20', value: 'font-size: 20px;' },

      { key: 'fz-24', value: 'font-size: 24px;' },

      { key: 'fz-26', value: 'font-size: 26px;' },

      { key: 'fz-28', value: 'font-size: 28px;' },

      { key: 'fz-32', value: 'font-size: 32px;' },

      { key: 'fz-40', value: 'font-size: 40px;' },

      { key: 'tAbc', value: 'text-transform: Capitalize;' },

      { key: 'tABC', value: 'text-transform: Uppercase;' },

      { key: 'tabc', value: 'text-transform: Lowercase;' },

      { key: 'tcut', value: 'text-overflow: ellipsis; white-space: nowrap; overflow: hidden;' },

      { key: 'fwl', value: 'font-weight: lighter;' },

      { key: 'fwb', value: 'font-weight: bold;' },

      { key: 'tc', value: 'text-align: center;' },

      { key: 'tl', value: 'text-align: left;' },

      { key: 'tr', value: 'text-align: right;' },

      { key: 'text-red', value: 'color: #e54d42;' },

      { key: 'text-orange', value: 'color: #f37b1d;' },

      { key: 'text-yellow', value: 'color: #fbbd08;' },

      { key: 'text-olive', value: 'color: #8dc63f;' },

      { key: 'text-green', value: 'color: #39b54a;' },

      { key: 'text-cyan', value: 'color: #1cbbb4;' },

      { key: 'text-blue', value: 'color: #0081ff;' },

      { key: 'text-purple', value: 'color: #6739b6;' },

      { key: 'text-mauve', value: 'color: #9c26b0;' },

      { key: 'text-pink', value: 'color: #e03997;' },

      { key: 'text-brown', value: 'color: #a5673f;' },

      { key: 'text-grey', value: 'color: #8799a3;' },

      { key: 'text-gray', value: 'color: #aaaaaa;' },

      { key: 'text-black', value: 'color: #333333;' },

      { key: 'text-white', value: 'color: #ffffff;' },
    ]
  },
  {
    id: "interaction",
    name: "交互",
    content: [
      { key: 'csd', value: 'cursor: default;' },

      { key: 'csp', value: 'cursor: pointer;' },

      { key: 'csm', value: 'cursor: move;' },

      { key: 'cst', value: 'cursor: text;' },

      { key: 'usn', value: 'user-select: none;' },

      { key: 'vam', value: 'vertical-align: middle;' },
    ]
  },
]

export default documentObj